<script setup lang="ts">
import { reactive } from 'vue';

const props: any = defineProps<{
    ujt: any;
}>();

const { $fn } = props.ujt;
const apiRefData: any = reactive({
    table: 'asaitestnewsqlite',
    data: {
        ai_sn: 'sn' + Date.now().toString(),
        ai_fl: 'azsg',
        ai_bt: '标题' + Date.now().toString(),
        ai_nr: '测试数据的内容',
        ai_tm: Date.now().toString(),
        ai_t1: '0',
        ai_dj: 0,
        ai_xy: 1,
        ai_hi: 292,
        ai_xi: 0,
        ai_xo: 0,
    },
    datalist: null,
    datashow: null,
});
apiSqliteFetch();
function apiSqliteFetch() {
    $fn.api['webserver']
        .apiGet(`/api/asaisqlite/manage/select/?table=${apiRefData.table}`)
        .then((res: any) => {
            apiRefData.datalist = res.data;
            console.log(666.707, res);
        });
}
function apiSqliteInsert() {
    $fn.api['webserver']
        .apiPost(
            `/api/asaisqlite/manage/insert/${apiRefData.data.ai_sn}/?table=${apiRefData.table}`,
            apiRefData.data,
            {
                mm: 1, //加密传输功能
            }
        )
        .then((res: any) => {
            apiSqliteFetch();
            console.log(666.701, res);
        });
}
function apiSqliteDelete(item: any) {
    $fn.api['webserver']
        .apiGet(
            `/api/asaisqlite/manage/delete/${item.ai_sn}/?table=${apiRefData.table}`
        )
        .then((res: any) => {
            apiSqliteFetch();
            console.log(666.702, res);
        });
}
function apiSqliteUpdate() {
    $fn.api['webserver']
        .apiPost(
            `/api/asaisqlite/manage/update/${apiRefData.data.ai_sn}/?table=${apiRefData.table}`,
            apiRefData.data,
            {
                mm: 1,
            }
        )
        .then((res: any) => {
            apiSqliteFetch();
            console.log(666.703, res);
        });
}
function apiSqliteSelect(item: any) {
    $fn.api['webserver']
        .apiGet(
            `/api/asaisqlite/manage/select/${item.ai_sn}/?table=${apiRefData.table}`
        )
        .then((res: any) => {
            apiRefData.datashow = res.data[0];
            console.log(666.704, res);
        });
}
function apiSqliteSelectTTPost() {
    $fn.api['webserver']
        .apiPost(
            `/api/asaisqlite/manage/post/${apiRefData.data.ai_sn}/?table=${apiRefData.table}`,
            apiRefData.data,
            {
                mm: 1,
            }
        )
        .then((res: any) => {
            console.log(666.711, res);
        });
}
function apiSqliteSelectTTGet() {
    $fn.api['webserver']
        .apiGet(`/api/asaisqlite/manage/get/${apiRefData.data.ai_sn}/`, {
            table: apiRefData.table,
        })
        .then((res: any) => {
            console.log(666.712, res);
        });
}
</script>

<template>
    <div class="as-sqlite-area">
        <JsonEditor
            :ujt="ujt"
            :asaidata="{
                eq: 3,
                ic: 2,
                data: apiRefData.data,
                ty: 'json', // json txt
            }"
            :fnapi="$fn.api['webserver']"
        ></JsonEditor>
        <button @pointerdown="apiSqliteInsert()">Insert</button>
        <button @pointerdown="apiSqliteUpdate()">Update</button>
        <hr />
        <div class="as-table-area">
            <div class="as-table">
                <div class="as-table-body-new">
                    <div
                        class="as-table-row"
                        v-for="item in apiRefData.datalist"
                        :key="item.ai_sn"
                    >
                        <div class="lim">{{ item.ai_bt }}</div>
                        <div>
                            <button @pointerdown.stop="apiSqliteDelete(item)">
                                Delete
                            </button>
                        </div>
                        <div>
                            <button @pointerdown.stop="apiSqliteSelect(item)">
                                Select
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <hr />
        <JsonEditor
            :ujt="ujt"
            :asaidata="{
                eq: 1,
                ic: 2,
                data: apiRefData.datashow,
                ty: 'json', // json txt
            }"
            :fnapi="$fn.api['webserver']"
        ></JsonEditor>
        <hr />
        <button @pointerdown="apiSqliteSelectTTPost()">
            apiSqliteSelectTTPost
        </button>
        <button @pointerdown="apiSqliteSelectTTGet()">
            apiSqliteSelectTTGet
        </button>
    </div>
</template>

<style scoped lang="scss">
.as-sqlite-area {
    text-align: left;
}
button {
    height: 38px;
    padding: 0 12px;
    margin-right: 12px;
    background-color: var(--cm8);
    color: var(--cm0);
}
</style>
